/*
 * @Author: Zhang Kai
 * @Date: 2021-11-05 20:58:49
 * @LastEditors: Zhang Kai
 * @LastEditTime: 2022-06-08 13:53:17
 * @FilePath: /metricsx-standard-ui/src/components/SearchForm/index.tsx
 */
import { defineComponent, reactive, ref, watch, computed } from 'vue';
import { ElForm, ElRow, ElCol, ElButton, ElIcon } from 'element-plus/lib/index';
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
import '../SearchForm/index.scss';

const SearchForm = defineComponent({
  name: 'SearchForm',
  props: {
    /** 默认显示个数 */
    defaultShowItems: {
      type: Number,
      default: 0 // TODO：能是另外的一个值吗
    },
    /** 一行的个数 */
    num: {
      type: Number,
      default: 3 // 默认只能是 3 或者 4
    },
    model: {
      type: Object,
      default: () => {}
    },
    formRef: {
      type: Object,
      default: () => {}
    },
    labelWidth: {
      type: String,
      default: '100px'
    },
    isSearchBtn: {
      type: Boolean,
      default: true
    }
  },
  emits: ['search', 'reset'],
  setup(props, { slots, emit }) {
    // 是否展开
    const advanced = ref(false);
    // 每一个的 span 的值  栅格占位格数
    const span = computed(() => {
      return 24 / props.num;
    });
    /**
     * @description 默认显示的插槽
     */
    const defaultShowSlots = computed(() => {
      // TODO: 需要过滤掉 注释等一些组件 或者说只能要 type等于字符串的 这个
      const defaultShowItems = props.defaultShowItems || props.num - 1;
      let childrens: any[] = (slots.default && slots.default()) || [];
      if (childrens.length > 0) {
        //去除是null，他是隐藏的
        childrens = childrens.filter((item) => item.children != null);
        return childrens.slice(0, defaultShowItems) || [];
      }
      //动态筛选条件的插槽
      const filterChildrens: any[] =
        (slots.pageFilter && slots.pageFilter()) || [];
      if (filterChildrens.length > 0) {
        return filterChildrens[0].children[0].slice(0, defaultShowItems) || [];
      }
    });

    /**
     * @description 显示更多的插槽
     */
    const advancedShowSlots = computed(() => {
      const defaultShowItems = props.defaultShowItems || props.num - 1;
      let childrens: any[] = (slots.default && slots.default()) || [];
      if (childrens.length > 0) {
        childrens = childrens.filter((item) => item.children != null);
        return childrens.slice(defaultShowItems);
      }
      //动态筛选条件的插槽
      const filterChildrens: any[] =
        (slots.pageFilter && slots.pageFilter()) || [];
      if (filterChildrens.length > 0) {
        return filterChildrens[0].children[0].slice(defaultShowItems);
      }
    });

    /**
     * 偏移量
     */
    const calcSubBtnOffset = () => {
      const defaultShowItems = props.defaultShowItems || props.num - 1;
      const childrens: any =
        (slots.default && slots.default()) ||
        (slots.pageFilter && slots.pageFilter()[0]?.children?.[0]) ||
        [];
      const total =
        (advanced.value ? childrens.length + 1 : defaultShowItems) * span.value;
      const remainder = total % 24;
      if (total < 24 || remainder === 0) {
        return 0;
      }
      return 24 - remainder;
    };
    const toggleAdvanced = () => {
      advanced.value = !advanced.value;
    };
    // flex-direction: column;
    // text-align: left;
    // justify-content: center;
    // display: flex;
    return () => {
      const { model, formRef, labelWidth, isSearchBtn } = props;
      return (
        <div class="SearchForm">
          <ElForm
            labelPosition={'right'}
            ref={formRef as any}
            model={model}
            labelWidth={labelWidth}
          >
            <ElRow>
              {defaultShowSlots.value.map((vnode: any, index: any) => {
                return (
                  <ElCol
                    md={{ span: span.value, offset: 0 }}
                    key={index + 'defalu'}
                  >
                    {vnode}
                  </ElCol>
                );
              })}
              {advanced.value &&
                advancedShowSlots.value.map((vnode: any, index: any) => {
                  return (
                    <ElCol
                      md={{ span: span.value, offset: 0 }}
                      key={index + 'advance'}
                    >
                      {vnode}
                    </ElCol>
                  );
                })}
              <ElCol
                style={{ textAlign: 'right' }}
                md={{ span: span.value, offset: calcSubBtnOffset() }}
              >
                <ElButton
                  onClick={() => {
                    emit('reset');
                  }}
                >
                  重置
                </ElButton>
                {isSearchBtn ? (
                  <ElButton type="primary" onClick={() => emit('search')}>
                    搜索
                  </ElButton>
                ) : undefined}

                {advancedShowSlots.value.length ? (
                  <el-button onClick={toggleAdvanced} type="text">
                    {advanced.value ? '收起' : '展开'}
                    <el-icon color="#396EFE">
                      {advanced.value ? <ArrowUp /> : <ArrowDown />}
                    </el-icon>
                  </el-button>
                ) : (
                  ''
                )}
              </ElCol>
            </ElRow>
          </ElForm>
        </div>
      );
    };
  }
});

export default SearchForm;
